<template lang="html">
  <div class="">
    <app-title title="录入列表"></app-title>
    <div class="content-wrapper">
      <div class="new-app">
        <el-button type="primary">
          <router-link to="/application/app-entry/create-new-app">
            创建新应用
          </router-link>
        </el-button>
        <span class="desc">创建新应用以录入信息和上传应用</span>
      </div>
      <ul class="app-list" v-loading="listLoading">
        <li v-for="app in appList">
          <div class="app-info">
            <div class="app-icon">
              <img :src="app.icon" alt="">
            </div>
            <div class="app-desc">
              <h3 class="app-title">{{app.name}}</h3>
              <dl class="clearfix">
                <dt>应用包名:</dt>
                <dd>{{app.packageName}}</dd>
                <dt>应用版本:</dt>
                <dd>{{app.version}}</dd>
                <!-- <dt class="status">状态:</dt>
                <dd class="status">{{app.status}}</dd> -->
              </dl>
              <el-tag :type="typeMap[app.status]" style="">{{app.status}}</el-tag>
            </div>
          </div>
          <div class="app-management clearfix">
            <div class="normal-operation">

              <el-button :plain="true" type="info" v-if="app.status==='未发布'" @click="releaseApp(app.id)">
                发布应用
              </el-button>
              <el-button :plain="true" type="info" v-else-if="app.status==='定时上线'||app.status==='审核中'" @click="setRelease">
                设置上线
              </el-button>
              <el-button :plain="true" type="info" v-else-if="app.status==='已上线'" @click="update">
                更新版本
              </el-button>
              <el-button :plain="true" type="info" v-else-if="app.status=='未通过'" @click="checkStatus">查看原因</el-button>
              <el-button :plain="true" type="info" :disabled="app.status=='未发布'" @click="checkInfo(app.id)">
                查看应用信息
              </el-button>
              <!-- <el-button :plain="true" type="info">分发数据</el-button> -->
            </div>
            <!-- <el-button type="text" class="check-button" v-if="app.status==='未通过'">查看原因并处理</el-button> -->
            <el-button type="text" class="del-button" >删除应用<i class="el-icon-close"></i></el-button>
          </div>
        </li>
      </ul>
    </div>
    <el-dialog title="设置上线" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="上线时间">
          <span>未设置</span>
        </el-form-item>
        <el-form-item label="设置上线">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import AppTitle from '../AppTitle'
  import { fetchAppList } from '@/api/apps'
  console.log(fetchAppList)

  export default {
    components: {
      "app-title": AppTitle
    },
    data(){
      return {
        appList: [],
        listLoading: true,
        typeMap: {
          '未发布': 'info',
          '审核中': 'warning',
          '定时上线': "success",
          '未通过': 'danger',
          '已上线': ''
        },
        dialogFormVisible: false,
        form: {
          date1: '',
          date2: ''
        }
      }
    },
    created(){
      this.getAppList()
    },
    methods:{
      getAppList(){
        this.listLoading = true
        fetchAppList().then(res => {
          this.appList = res.data.apps
          this.listLoading = false
        })
      },
      releaseApp(id){
        this.$router.push({
          name: 'upload-file',
          query: {
            id
          }
        })
      },
      checkStatus(status){
        this.$router.push(`/application/app-entry/app-status/failed?id=1111`)
      },
      setRelease(){
        this.dialogFormVisible = true
      },
      checkInfo(id){
        this.$router.push({
          name: 'app-info',
          query: {
            id
          }
        })
      },
      update(){
        this.$router.push('/application/app-entry/upload-app/upload-file')
      }
    },

  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .content-wrapper{
    padding: 24px;
    .new-app{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 10px;
      .desc{
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        color: #818181;
      }
    }
    .app-list{
      padding: 0;
      border-top: 1px solid #cbcbcb;
      margin-top: 0;
      li{
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: 1px solid #cbcbcb;
        .app-info{
          display: flex;
          justify-content: space-between;
          .app-icon{
            position: relative;
            width: 50px;
            height: 50px;
            margin-right: 20px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .app-desc{
            h3.app-title{
              font-size: 18px;
              font-weight: 400;
              color: #1f2f3d;
              margin: 0 0 18px 0;
            }
            dl{
              margin-bottom: 4px;
              dt{
                clear: left;
              }
              dt, dd{
                float: left;
                display: inline-block;
                // line-height: 22px;
                font-size: 14px;
                font-weight: 400;
                margin-bottom: 6px;
              }
            }
          }
        }
        .app-management{
          .check-button{
            float: right;
            clear: both;
            padding-bottom: 0;
          }
          .del-button{
            float: right;
            color: red;
            clear: both;
          }
        }
      }
    }
  }
</style>
